<template>
<router-link to="/login"  tag="div" class="background">
  <div class="textLeft">说你想说</div>
  <div class="textRight">谈你所想</div>
  <div class="itemName">小小论坛</div>
  <div class="author">@小小二人组</div>
</router-link>
</template>

<script>
import {userInfo} from '../api/api'
export default {
  name: "BootAnimation",
  created() {
    // 获取登录状态,如果已登录跳转到index页
    setTimeout(()=>{
      userInfo().then(res=>{
        if(res.code=='0'){
          this.$router.push('/index')
        }
      })
    },6000)
  }
}
</script>

<style scoped lang="less">
.background {
  position: relative;
  width: 100%;
  height: 100vh;
  background-color: dodgerblue;
//  字体
  font-weight: 700;
  font-size: 24px;
  font-family: 楷体;
  color: white;
}
.textLeft {
  position: absolute;
  top: 55%;
  left: -50%;
  animation-name: textLeft;
  animation-duration: 4s;
}
@keyframes textLeft {
  0%  { }
  10% { left:10%;  }
  60% { left:15%;  }
  80% { left:10%;  }
  95% { left:10%;  }
  100% { }
}
.textRight {
  position: absolute;
  top: 55%;
  right: -50%;
  animation-name: textRight;
  animation-duration: 4s;
}
@keyframes textRight {
  0%  { }
  10% { right:10%;  }
  60% {  right:15%;  }
  80% {  right:10%;  }
  95% {  right:10%;  }
  100% { }
}
.itemName {
  width: 1em;
  font-size: 30px;
  position: absolute;
  top: 20%;
  left: 50% - 2.5em;
  animation-name: itemName;
  animation-duration: 8s;
  transition-timing-function: ease;
}
@keyframes itemName {
  0%  { top: -25% }
  49% { top: -25% }
  50% { top:10%;  }
  60% { top:20%;  }
  65% { top:10%;  }
  70% {
    top:20%;
    //transform: rotate(360deg);
  }
  100% { }
}
.author {
  font-family: 仿宋;
  font-size: 12px;
  position: absolute;
  bottom: 5px;
  left: 50% - 3em;
  animation-name: author;
  animation-duration: 8s;
}
@keyframes author {
  0%   { left: -50% }
  49.5% { left: -50% }
  50%  { left: 50% - 3em}
  100% {  }
}
</style>